1、说那四点前,先用 npm 构造项目,并看看目录结构。
1.1 用 npm 全局安装 vue 的命令行工具
npm install --global vue-cli
1.2 创建一个基于 webpack 模板的新项目
vue init webpack my-project
1.3 进行项目目录,并运行
cd my-project; vue run dev
1.4 目录结构
|
| - build : 项目构建(webpack)相关代码
| - config : 配置目录,可以在 index.js 文件中修改端口号
| - node_modules : npm 依赖模块
| - src : 要开发的目录,要做的事情基本都在这个目录里。包含:
| - - assets : 放图片
| - - components : 组件文件
| - - App.vue : 项目入口文件
| - - main.js : 项目的核心文件
| - static : 静态资源目录,如图片、字体
| - .xxxx 文件 : 配置文件、包括语法配置,git 配置等
| - index.html : 首页入口文件
| - package.json : 项目配置文件
| - README.md : 项目说明文档,markdown 模式
2、Vue 起步
2.1 Vue 实例
var vue = new Vue({
var data = {msg: 'This is data'};
el: '#app',
data:data,
methods:{
details: function(){
return "This is a method"
}
}
document.write(vue.$data === data); // true
});
2.2 使用特点
2.2.1 内容格式为 Json 格式;
2.2.2 Vue 实例三部分构成
第一部分:绑定元素字段 el:
el: '选择器'
第二部分:定义属性模块
data:{
name: value
}
第三部分:定义方法模块 methods:
methods:{
// 变量函数
方法名: 方法体
}
2.2.3 {{}}
用来标识要使用的变量或者方法
2.2.4 可以通过变量来,访问 Vue 实例中的成员,需要用 $ 符号声明
vue.$el
掌握这四个特点,就入门 Vue 了。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。